import React, {useState} from "react";
import {
    Player,
    ControlBar,
    PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
    ReplayControl, // 后退按钮
    ForwardControl,  // 前进按钮
    CurrentTimeDisplay,
    TimeDivider,
    PlaybackRateMenuButton,  // 倍速播放选项
    VolumeMenuButton
} from 'video-react';
import "video-react/dist/video-react.css"; // import css
import "./index.less"
import {
    DeleteTwoTone,
    EditOutlined,
    EditTwoTone,
    EllipsisOutlined,
    PlayCircleOutlined,
    SettingOutlined
} from '@ant-design/icons';
import {Avatar, Button, Card, List, message, Popconfirm} from 'antd';
// @ts-ignore
import {VideoType} from '@/models/video';
import {getLoginUser} from "@/services/userService";
import {deleteVideo, queryVideoListByUserId} from "@/services/videoService";
import VideoAddModal from "@/pages/video/add";
import UpdateModal from "@/pages/admin/video/components/UpdateModal";
const query: PageRequest = {
    current: 1,
    pageSize: 200
}

// 用户Id
let userId = 0;

const VideoShowPage: React.FC<unknown> = () => {
    const [videoAddModalVisible, setVideoAddModalVisible] = useState(false);


    const [videoListData, setVideoListData] = useState<VideoType.Video[]>(() => {
        let data: VideoType.Video[] = []
        // 获得用户ID
        getLoginUser().then(async (res) => {
            userId = res.data.id
            console.log("userId=" + userId)
            // 获得视频列表
            await queryVideoListByUserId(res.data.id, query).then(res => {
                data = res.data.records
                setVideoListData(data)
                console.log(res)
            }).catch(e => {
                message.error(e.message)
            })
        }).catch(e => {
            message.error(e.message)
        })
        return data;
    })

    const [videoData, setVideoData] = useState<VideoType.Video>({})

    const [updateModalVisible, setUpdateModalVisible] = useState<boolean>(false)

    /**
     * 初始化视频列表数据
     */
    const initVideoList = (query: PageRequest) => {
        if (userId === 0) {
            // 获得用户ID
            getLoginUser().then(res => {
                userId = res.data.id
                // 获得视频列表
                queryVideoListByUserId(userId, query).then(res => {
                    setVideoListData(res.data.records)
                }).catch(e => {
                    message.error(e.message)
                })
            }).catch(e => {
                message.error(e.message)
            })
        } else {
            const hide = message.loading("加载数据中")
            // 获得视频列表
            queryVideoListByUserId(userId, query).then(res => {
                setVideoListData(res.data.records)
            }).catch(e => {
                message.error(e.message)
            }).finally(()=>{
                hide()
            })
        }
    }


    const {Meta} = Card;

    return (
        <div>
            <Button icon={<PlayCircleOutlined/>} type="primary" className="btn-main"
                    onClick={() => setVideoAddModalVisible(true)}>上传视频</Button>
            <List
                grid={{
                    gutter: 4,
                    xs: 1,
                    sm: 2,
                    md: 3,
                    lg: 3,
                    xl: 3,
                    xxl: 4
                }}
                // 分页处理
                pagination={{
                    onChange: (page) => {
                        console.log(page)
                    },
                    defaultCurrent: 1,
                    defaultPageSize: 8,
                    pageSize: 8,
                }}
                dataSource={videoListData}
                renderItem={(item) => (
                    <List.Item>
                        <Card
                            key={item.id}
                            hoverable={true}
                            className='card-main'
                            style={{width: 400}}
                            cover={
                                <Player
                                    autoPlay={false}
                                    playsInline='false'
                                    src={item.videoUrl}
                                    fluid={false}
                                    height={250}
                                    width={400}
                                    poster={item.picUrl}
                                >
                                    <ControlBar autoHide={false}>
                                        <CurrentTimeDisplay order={4.1}/>
                                        <TimeDivider order={4.2}/>
                                        <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1}/>
                                        <VolumeMenuButton/>
                                    </ControlBar>
                                </Player>
                            }
                            actions={[
                                <EditTwoTone key="edit" onClick={() => {
                                    setVideoData(item), setUpdateModalVisible(true)
                                }}/>,
                                <Popconfirm
                                    title="确定删除？"
                                    onConfirm={async () => {
                                        await deleteVideo(item.id).then(res => {
                                            if (res.data === true) message.success("删除成功")
                                            initVideoList(query)
                                        }).catch(e => {
                                            message.error(e.message)
                                        })
                                    }}
                                    okText="Yes"
                                    cancelText="No"
                                >
                                    <DeleteTwoTone key="delete" twoToneColor="#eb2f96"/>
                                </Popconfirm>

                            ]}
                        >
                            <Meta
                                avatar={<Avatar src={item.userAvatar}/>}
                                title={item.userName}
                                description={item.text}
                            />
                        </Card>
                    </List.Item>
                )}
            />

            <VideoAddModal
                visible={videoAddModalVisible}
                initData={() => {
                    initVideoList(query)
                }}
                onClose={() => setVideoAddModalVisible(false)}
            />


            {/*<TestModal*/}
            {/*    modalVisible={updateModalVisible}*/}
            {/*    videoData={videoData}*/}
            {/*    onInitData={() => {*/}
            {/*        initVideoList(query);*/}
            {/*    }}*/}
            {/*    onCancel={() => setTestModalVisible(false)}*/}
            {/*/>*/}

            <UpdateModal
                modalVisible={updateModalVisible}
                videoData={videoData}
                onInitData={() => {
                    initVideoList(query);
                }}
                onCancel={() => setUpdateModalVisible(false)}
            />
        </div>

    );


};


export default VideoShowPage;
